<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1，变量
        // 声明变量
        // let name = "zhangshan"
        // let age = 18

        // 修改变量
        // name = "lisi"
        // age = 20

        //2，常量
        // 声明常量值
        const PI = 3.14
        // 声明常量数组
        // const arr = []
        // 声明常量对象
        // const user = {
        //     name: "Vue3",
        //     age: 9
        // }

        // 关于被const修饰的数组与对象是否可以进行操作使用实例
        // 创建数据 和 对象
        // const arr = [1, 2, 3]
        // const user = {
        //     name: "Vue",
        //     age: 9
        // }
        // //1 对数组进行增、删
        // // 尾增
        // arr.push(4)
        // console.log(arr)
        // // 头删
        // arr.shift()
        // console.log(arr)

        // //2 对对象属性进行增、改
        // // 增加属性
        // user.birth = 2015
        // console.log(user)
        // // 修改属性
        // user.age = 110
        // console.log(user)

        // 模板字符串

        //1 可以进行换行，增加可读性
        // let htmlStr = `<a href="https://baidu.com" target="_blank">
        //     <h3>精品男装</h3>
        //     <p>卖爆了！卖爆了！卖爆了！卖爆了！</p>
        // </a>`

        //2 可以更加便捷在字符串中嵌入表达式
        // let name = "careathers"
        // let age = 15
        // let msg = `My name is ${name}, I am ${age} years old, I am ${age >= 18 ? "an adult" : "underrage"}`
        // console.log(msg)

        // 对象
        // const user = {
        //     name: "careathers",
        //     age: 18
        // }

        // 1 对象的取值
        // -使用点进行取值
        // console.log(user.name)
        // -使用中括号进行取值
        // console.log(user["age"])

        // -注意事项：若是键名称为字符串，则只能使用中括号进行取值
        // x = "name"
        // console.log(user[x])

        // 2 对象的缩写
        // 传统写法
        // min = 1
        // max = 99
        // const range = {
        //     min: min,
        //     max: max
        // }
        // console.log(range)

        // 简写：由于属性名==属性值变量名，因此可以简写如下
        // const range1 = {
        //     min,
        //     max
        // }
        // console.log(range1)

        // 数组相关知识
        // const arr = [11, 22, 33]
        // 1 正常思路获取数据元素
        // x = arr[0]
        // y = arr[1]
        // z = arr[2]
        // console.log(x, y, z)

        //1.1 接收数组中的全部元素
        // const arr = [11, 22, 33]
        // let [a, b, c] = arr
        // console.log(a, b, c)

        //1.2 接收数组中的部分元素
        // 只接收22, 33
        // const arr = [11, 22, 33]
        // let [,b, c] = arr
        // console.log(b, c)

        //1.3 使用数组接收数组中的元素
        // const arr = [11, 22, 33]
        // let [a, ...rest] = arr
        // console.log(a, rest)



        // 练习:将3，4赋值给a，b 
        // const arr = [2, [3, 4], 5]
        // let[, [a, b], ] = arr
        // console.log(a, b)
        
        // 对象相关知识

        // const obj = {
        //     name: "长沙民政职业技术学院",
        //     age: 38,
        //     address: "湖南省长沙市雨花区香樟路22号"
        // }
        // 1 接收全部元素
        // let {name: name, age: age, address: address} = obj
        // 使用对象简写语法
        // let {name, age, address} = obj
        // console.log(name, age, address)

        // const obj = {
        //     name: "长沙民政职业技术学院",
        //     age: 38,
        //     address: "湖南省长沙市雨花区香樟路22号"
        // }
        // 2 接收部分元素
        // 只接收name\age元素
        // let {name, age} = obj
        // console.log(name, age)

        // const obj = {
        //     name: "长沙民政职业技术学院",
        //     age: 38,
        //     address: "湖南省长沙市雨花区香樟路22号"
        // }
        // 3 使用对象进行接收
        // let {name, ...rest} = obj
        // console.log(name, rest)

        // const obj = {
        //     name: "长沙民政职业技术学院",
        //     age: 38,
        //     address: "湖南省长沙市雨花区香樟路22号"
        // }
        // // 4 变量重命名接收
        // let{name: rename} = obj
        // console.log(rename)


        const obj = {
            data: {
                code: 10000,
                message: "频道列表获取成功!",
                result: ["HTML", "CSS", "JavaScript", "Vue", "SpringBoot"]
            },
            status: 200,
            statusText: "OK"
        }
        console.log(obj)

        // 练习:把code\message\result等值提取并赋值给变量code\message\result
        // 操作方法与数组一致,按照结构依次解构赋值即可
        let {data: {code, message, result}} = obj
        console.log(code, message, result)
        

    </script>
    <p>succeed!</p>
</body>
</html>